@import './token.less';

// 菜单默认样式
.menu() {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 138px;
  background-color: @menu-color-background;
  color: @menu-sub-color;
}

.menuItem(@positionStyle: static) {
  position: @positionStyle;
  cursor: pointer;

  &-title {
    .menuItemTitle();
  }

  &-title > span {
    opacity: 1;
    transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
  }

  &-collapsed {
    padding: 0;
    margin: 0;
    text-align: center;

    .@{menuitem-prefix-cls}-title,
    .@{submenu-prefix-cls}-title {
      // display: block;
      & > p {
        margin: 0 auto;
      }

      & > span {
        opacity: 0;
        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
      }
    }
  }

  &-icon {
    margin: 0 15px;
    font-size: @menu-icon-font-size;
  }

  &-disabled {
    cursor: not-allowed;
    color: @menu-color-disabled;
  }

  &-active {
    .hover();
  }

  &-arrow {
    margin-left: auto;
    font-size: 16px;
    &-up {
      transform: rotate(180deg);
      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
    }

    &-down {
      transform: rotate(0deg);
      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
    }
  }
}

.hover {
  background-color: @menu-sub-color-background;
  color: @menu-sub-color-hover;
}

.light-hover {
  background-color: @menu-light-color-background;
  color: @menu-light-color-hover;
}

.light-default {
  color: @menu-light-color;
  background: #ffffff;
}

.menuItemTitle() {
  display: flex;
  align-items: center;
  height: 50px;
  .ellipsis();
  & > span {
    .ellipsis();
  }
}
